<template>
  <div class="cate">
    <!-- 搜索组件 -->
    <mysearch :isChat='true'></mysearch>
    <!-- 左侧分类区域 -->
    <div class="cate-left" ref="left">
      <div class="cate-left-wrp">
        <ul>
          <li v-for="(item, i) in categoryList" :key="i" :class="{ active: index === i }" @click="itemClick(i, item)">
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 右侧内容区域 -->
    <div class="cate-right">
      <!-- 子分类列表 -->
      <ul class="right-list">
        <li v-for="(item, i) in categoryGetSub" :key="i" @click="goodscategory(item)">
          <img :src="item.image" alt="" />
          <span>
            {{ item.title }}
          </span>
        </li>
      </ul>
      <!-- 主分类商品列表 -->
      <div class="nav-box">
        <!-- 商品头部导航区域 -->
        <ul>
          <li v-for="(nav, i) in categoriesNav" :key="i" @click="shopNav(i, nav)">
            <span :style="{ color: navIndex === i ? '#ef4562' : '' }">{{
              nav.title
              }}</span>
          </li>
        </ul>
        <!-- 商品列表区域 -->
        <div class="goods-list">
          <a class="goods-item" href="" v-for="(item, index) in categoriesList" :key="index"
            @click.prevent="gotodetails(item)">
            <goodsitem :goods="item"></goodsitem>
            <!-- <div> -->
            <!-- <div class="goods-item-wap">
                <img :src="item.img" alt="" />
                <div class="sale">
                  <span>已售{{ item.sale }}件</span>
                </div>
              </div> -->
            <!-- 商品描述区域 -->
            <!-- <div class="goods-info">
                <p class="title">
                  {{ item.title }}
                </p>
                <div class="footer">
                  <span class="price">￥{{ item.price }}</span>
                  <span class="collect">{{ item.cfav }}</span>
                  <img src="../assets/image/cate/collect.png" alt="" />
                </div>
              </div> -->
            <!-- </div> -->
          </a>
          <div class="loadmo" ref="loadmore">
            正在加载中...
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MiniWall from '@/components/MiniWall.vue'
import mysearch from '../components//My-search'
import goodsitem from '../components/Goods_item.vue'
export default {
  components:{
    MiniWall,
    mysearch,
    goodsitem

  },
  data() {
    return {
      index: 0, //高亮下标
      categoryList: [], //一级分类列表
      categoryGetSub: [], //二级分类列表
      categoriesNav: sessionStorage.getItem("categoriesNav") ||'[]', //商品分类数据
      categoriesList: [], //主分类商品
      navIndex: 0, //分类高亮
      isloading: false,//是否在发请求
      shopParam:{},

    };
  },
  methods: {
    //  高亮下标
    itemClick(i, item) {
      this.index = i;
      this.navIndex = 0;
      this.getCategoryGetSub(item.maitKey);
      this.categoriesList=[]
      this.getCategoriesList(item.miniWallkey);
  
    },
    // 点击显示对应商品
    shopNav(i, nav) {
      this.navIndex = i;
      console.log(nav);
      this.categoriesList = []
      this.getCategoriesList(this.shopParam.fcid, nav.sortKey);
    },
    // 获取一级分类数据
    async getCategoryList() {
      const { data: res } = await this.axios.get("category.json");
      this.categoryList = res.data[117330].list;
    },
    //  获取二级分类数据
    async getCategoryGetSub(id) {
      const { data: res } = await this.axios.get("/category/getSub?pid=" + id);
      this.categoryGetSub = res.data.list;
     
    },
    //获取主分类商品列表
    async getCategoriesList(id, type = "pop") {
      console.log(id);
      this.isloading = true
      const { data: res } = await this.axios.get(
        `/category/miniWall?fcid=${id}&page=${this.shopParam.page}&sort=${type}`
      );
      this.isloading = false
      this.shopParam = res.result.param 
      console.log(this.shopParam);
      if (this.shopParam.page == 1) {
        this.categoriesNav = res.result.sortFilter
      }
      this.categoriesList = [...this.categoriesList, ...res.result.wall.docs];
      // this.categoriesList = res.result.wall.docs;
     
    },
    // 触底加载
    scrollEvents() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let h = this.$refs.loadmore.offsetTop;
      //获窗口的内容可视区高度
      let clientHeight = window.innerHeight;
      if (scrollTop + clientHeight >= h) {
        if (this.isloading) return
        this.shopParam.page++
        this.getCategoriesList(this.shopParam.fcid, this.shopParam.sort)
      }
 
    },
    // 跳转goodscategor页
    goodscategory(item){
      if (item.title ==='9.9秒杀') return
      this.$router.push({
        path:'/goodscategory',
        query:{
          keyword:item.title 
        }
      })
    },
    // 跳转商品详情
    gotodetails(item){
      console.log(item);
      this.$router.push({
        path: "/goodsdetails",
        query: {
          id: item.tradeItemId
        },
      });
    }
  },
  created() {
    this.getCategoryList();
    this.getCategoryGetSub("3627"); //默认显示第一个
    this.getCategoriesList("10062603");
  },
  mounted() {
    window.addEventListener("scroll", this.scrollEvents);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollEvents);
  },

};
</script>

<style lang="scss">


.cate {
  display: flex;
  margin-top: 50px;
}

.cate-left {
  width: 85px;
  height: 100vh;
  position: fixed;
  background-color: #fff;
  overflow: hidden;
  z-index: 999;
  .cate-left-wrp {
    height: 100vh;
    width: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f6f6f6;
    ul {
      li {
        display: flex;
        align-items: center;
        text-align: center;
        height: 45px;
        font-size: 14px;
        color: #666666;

        span {
          display: block;
          width: 100%;
          height: 15px;
        }

        &.active {
          background-color: #fff;
          color: #ff5577;
          font-weight: bold;

          span {
            border-left: solid #ff5577 4px;
          }
        }
      }
    }
  }
}
.cate-right {
  width: auto;
  padding-left: 100px;
  .right-list {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 33.3%;
      margin: 10px 0;
      font-size: 12px;
      color: #666666;
      img {
        width: 65px;
        height: 65px;
        margin-bottom: 10px;
      }
    }
  }
  .nav-box {
    margin-top: 17px;
    ul {
      display: flex;
      border-bottom: 1px solid #eaeaea;
      li {
        flex: 1;
        display: flex;
        align-items: center;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    
        span {
          display: block;
          width: 100%;
          line-height: 15px;
          border-left: 1px solid #eaeaea;
         
        }
        &.activeNav {
          color: #ef4562;
        }
           
      }
    }
  }
}
.goods-list {
  display: flex;
  flex-wrap: wrap;

  .goods-item {
    width: 47%;
    height: 300px;
    height: auto;
    margin: 2% 0 0 2%;

    .goods-item-wap {
      height: 177.5px;
      position: relative;
      width: 100%;
      background: #e5e5e5 !important;
      overflow: hidden;
      img {
        width: 100%;
        border-radius: 3px;
        border: none;
        vertical-align: middle;
      }
      .sale {
        position: absolute;
        left: 0;
        bottom: 5px;
        z-index: 999;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        background: url(../assets/image/cate/bg.png) no-repeat left center;
        background-size: 100%;
        color: #fff;
        span {
          padding: 0 8px;
        }
      }
    }
    .goods-info {
      padding: 5px 6px;
      overflow: hidden;

      .title {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .footer {
        display: flex;
        justify-content: space-between;

        .price {
          flex: 1;
          color: #ff5777;
          font-weight: bold;
          font-size: 15px;
        }

        .collect {
          font-size: 12px;
          color: #999999;
          margin-right: 2px;
        }

        img {
          width: 14px;
          height: 14px;
          margin-top: -2px;
        }
      }
    }
  }
}
.loadmo{
  width: 100%;
  margin: 0 auto;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
</style>